<template>
  <div class="subMenu">
    <div class="menuLogo"><img src="../../assets/logo.png" alt=""></div>
    <div class="menus">
      <a-menu style="width: 210px" mode="inline" @click="handleClick" :default-selected-keys="selectedKey" :default-open-keys="openKey">
        <template v-for="item in getNavData">
          <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
          <a-menu-item v-if="!item.children || item.children.length<=0" :key="item.path">
<!--            <a-icon type="mail" />-->
            <img :src="path === item.path?item.iconSelect:item.icon" alt="">
            <span style="font-size: 15px;">{{ item.name }}</span>
          </a-menu-item>
          <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
          <a-sub-menu v-else :key="item.path">
            <span slot="title" @mousedown="mouseDown(item)" @mouseup="mouseUp(item)"><img :src="item.path === subPath?item.iconSelect:item.icon" alt=""><span style="font-size: 15px;">{{item.name}}</span></span>
            <a-menu-item v-for="(demo,idx) in item.children" :key="demo.path" >
              <router-link :to="demo.path">
                {{demo.name}}
              </router-link>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </div>
  </div>
</template>
<script>
export default {
  name:'SubMenu',
  data(){
    return {
      getNavData:[],
      selectedKey:[],
      rootSubmenuKeys:[],
      openKey:['/system'],
      path:'',
      subPath:''
    }
  },
  created() {
    let path = this.$route.path;
    this.path = path;
    let configGetNavData = JSON.parse(localStorage.getItem('configMenus'));
    let configData = [];
    for(let i=0;i<configGetNavData.length;i++){
      if(configGetNavData[i].key){
        configGetNavData[i].children = [];
        this.rootSubmenuKeys.push(configGetNavData[i].path);
        configData.push(configGetNavData[i]);
      }
    }
    for(let i=0;i<configData.length;i++){
      for(let j=0;j<configGetNavData.length;j++){
        if(configData[i].key === configGetNavData[j].parent){
          configGetNavData[j].flag = false;
          configData[i].children.push(configGetNavData[j])
        }
      }
    }
    configData.forEach(item=>{
      if(path === item.path && (!item.children || item.children.length<=0)) {
        this.selectedKey = [item.path];
        this.openKey = [item.path]
      }
      item.children.forEach(demo=>{
        if(demo.path === path){
          this.selectedKey = [demo.path];
          this.openKey = [item.path]
        }
      })
    });

    this.getNavData = configData;
    // console.log(subMenus)

  },
  methods: {
    onOpenChange(openKeys){
      this.openKey = [];
    },
    handleClick(e) {
      this.$router.push({path:e.key});
      this.path = e.key
    },
    mouseDown(item) {
      this.subPath = item.path;
    },
    mouseUp(item){
      this.subPath = '';
    }
  }
}
</script>
<style lang="less" scoped>
.subMenu{
  width: 210px;
  height: 100%;
  .menuLogo{
    height: 48px;
  }
  .menus{
    /*height: 100%;*/
    height: calc(100% - 48px);
    overflow-y: scroll;
    .ant-menu{
      height: 100%;
    }
  }
  .menus::-webkit-scrollbar{
    display: none;
  }
}
</style>
